/* 
1 页面数据渲染
  1 定义一个函数
  2 发送请求获取数据  渲染页面 
    1 token 几乎都是携带在请求头中   写法几乎定死!！！
2 点击修改数据
 */

const tbody = document.querySelector("tbody");
// 获取数据渲染页面
async function getScore() {
  const result = (
    await axios({
      url: "/score/list",
      //  　请求头(对象)中　携带　　token
      // headers: {
      //   // 一般就写这个名字，如果你的接口文档找不到说明，问后端确认
      //   Authorization: localStorage.getItem("token8789"),
      // },
    })
  ).data.data;
  //   console.log(result);
  let htmlSet = "";
  for (const key in result) {
    // console.log(key);
    const { name, score } = result[key];
    htmlSet += `
    <tr>
    <th scope="row">${key}</th>
    <td>${name}</td>
    <td class="score" data-stu_id='${key}' data-batch='${1}'>${score[0]}</td>
    <td class="score" data-stu_id='${key}' data-batch='${2}'>${score[1]}</td>
    <td class="score" data-stu_id='${key}' data-batch='${3}'>${score[2]}</td>
    <td class="score" data-stu_id='${key}' data-batch='${4}'>${score[3]}</td>
    <td class="score" data-stu_id='${key}' data-batch='${5}'>${score[4]}</td>
    </tr>
    `;
  }
  tbody.innerHTML = htmlSet;
}
getScore();

tbody.addEventListener("dblclick", function (e) {
  //   console.log(12);  dblclick 短时间内快速按两下
  const target = e.target;
  if (target.classList.contains("score")) {
    // 显示一个输入框
    const input = document.createElement("input");
    input.type = "text";
    input.value = target.innerHTML;
    // 点击显示
    input.style.display = "block";
    // 插入到对应位置
    target.appendChild(input);
    // 失去焦点
    input.focus();
    // 绑定失去焦点事件
    input.addEventListener("blur", updateScore);
    // 绑定键盘按下事件
    input.addEventListener("keyup", function (inputEv) {
      // 判断按下是否为回车
      if (inputEv.key === "Enter") {
        console.log(12);
        // 事件解绑
        // input.removeEventListener("事件类型", 处理函数 有名称的函数 不能是匿名函数);
        input.removeEventListener("blur", updateScore);
        updateScore();
      }
    });

    // 封装函数 方便调用
    async function updateScore() {
      const { stu_id, batch } = target.dataset;
      const score = input.value;
      const res = (
        await axios({
          url: "/score/entry",
          method: "POST",
          data: { stu_id, batch, score },
        })
      ).data;
      console.log(res);
      //   判断
      if (res.code === 0) {
        toastr.success(res.massage, "成功修改");
        // 刷新数据
        getScore();
      }
    }
  }
});
